<template>
  <div class="app-main-content">
    <div class="top-btns-area">
      <div class="left-btns">
        <el-row
          class="btns-area">
          <div>
            <el-button
              v-oauth
              data-oauthUuid="1620439641000"
              type="primary"
              icon="el-icon-plus"
              @click="handleAdd">
              新增
            </el-button>
            <el-button
              v-oauth
              data-oauthUuid="1620439661000"
              type="danger"
              :loading="delBtnLoading"
              :disabled="!selected.length"
              icon="el-icon-delete"
              @click="handleDeleteAll">
              删除
            </el-button>
          </div>
        </el-row>
      </div>
      <div class="right-btns">
        <query
          class="query-form"
          :options="searchOptions"
          @query="onSearch" />
      </div>
    </div>
    <!-- 字段模糊查询 -->
    <scmsa-table
      v-loading="tableLoading"
      :data="tableData"
      :column="tableColumn"
      border
      :pagination="true"
      :height="tableTopHeight"
      align="center"
      :current-page="pageing.pageNum"
      :page-size="pageing.pageSize"
      :total="totalPage"
      highlight-current-row
      @size-change="handlePageSizeChange"
      @pagination-current-change="handlePageCurrentChange"
      @cell-click="cellClick"
      @selection-change="handleSelectionChange" />
    <!-- 添加/修改 -->
    <add
      ref="add"
      @appendData="appendData" />
  </div>
</template>
<script>
  import { baseApi } from '../api'
  import add from './create.vue'
  import query from '../query.vue'
  export default {
    name: 'MainIndex',
    components: {
      add,
      query
    },
    data() {
      return {
        totalPage: 0,
        fileData: [],
        difficultylevelOptions: [{
          name: '测试',
          value: '1'
        }],
        stateOptions: [],
        action: 'add',
        loading: false,
        tableLoading: false,
        delBtnLoading: false, // 删除按钮loading
        selected: [], // 复选框选中数据
        queryForm: null,
        pageing: {
          pageNum: 1,
          pageSize: 10
        },
        tableData: []
      }
    },
    computed: {
      tableTopHeight() {
        return this.$store.state.settings && (this.$store.state.settings.tableHeight * 0.5 - 48)
      },
      tableColumn() {
        return [
          {
            type: 'selection',
            width: 55,
            align: 'center'
          },
          {
            prop: 'chineseUsnmAbbr',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '中文简称',
            render: (h, params) => {
              return h('span', {
                style: {
                  color: '#1890ff',
                  cursor: 'pointer'
                },
                on: {
                  click: (e) => {
                    e.stopPropagation()
                    this.openDetail(params.row)
                  }
                }
              }, params.row.chineseUsnmAbbr)
            }

          },
          {
            prop: 'archiveFlag',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '归档标记',
            formatter: (row) => {
              return row.archiveFlag == '1' ? '是' : '否'
            }
          },
          {
            prop: 'countryNameAbbr',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '国别'
          },
          {
            prop: 'chineseUserName',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '中文全称'
          },
          {
            prop: 'englishUsnmAbbr',
            label: '英文简称',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            prop: 'englishUserName',
            label: '英文全称',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            prop: 'userType',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '类型',
            formatter: (row) => {
              return this.renderText(this.difficultylevelOptions, row.userType)
            }

          },
          {
            prop: 'userCategory',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '类别',
            formatter: (row) => {
              return this.renderText(this.difficultylevelOptions, row.userCategory)
            }
          },
          {
            prop: 'taxNum',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '税号'
          },
          {
            prop: 'taxNumAdd',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '税号附加码'
          },
          {
            prop: 'companyFlag',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '地区公司/剪切中心标志'
          },
          {
            prop: 'trade',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '行业'
          },
          {
            prop: 'stratagemMark',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '战略用户标志',
            formatter: (row) => {
              return row.stratagemMark == '1' ? '是' : '否'
            }
          },
          {
            prop: 'cancelMark',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '注销标志',
            formatter: (row) => {
              return row.cancelMark == '1' ? '是' : '否'
            }
          },
          {
            prop: 'relationMark',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '关联客户标志',
            formatter: (row) => {
              return row.relationMark == '1' ? '是' : '否'
            }
          },
          {
            prop: 'corpCode',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '法人代码'
          },
          {
            prop: 'orgCode',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '组织机构码'
          },
          {
            prop: 'officeAddr',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '办公所在地省份'
          },
          {
            prop: 'addrRegst',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '注册所在地省份'
          },
          {
            prop: 'dunBrand',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '邓百氏代码'
          },
          // {
          //   prop: '收货单位补充说明',
          //   minWidth: '120',
          //   showOverflowTooltip: true,
          //   label: 'cnsgUserAdd'
          // },
          {
            prop: 'cnsgUserRelaNo',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '收货单位关联码'
          },
          {
            prop: 'taxMode',
            label: '纳税方式标记',
            minWidth: '120',
            showOverflowTooltip: true,
            formatter: (row) => {
              return row.taxMode ? '是' : '否'
            }
          },
          {
            prop: 'userLastAccnSeqNo',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '最后账号序码'
          },
          {
            prop: 'userLastAddrSeqNo',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '最后地址序码'
          },
          {
            prop: 'userNum',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '用户/供应商代码'
          },
          {
            prop: 'userRelaNo',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '关联客商代码'
          },
          // {
          //   prop: 'remarkDscr',
          //   label: '备注'
          // },
          {
            label: '操作',
            fixed: 'right',
            width: 120,
            render: (h, params) => {
              return h('div', [
                h('el-button', {
                  props: {
                    type: 'text',
                    size: 'small',
                    loading: false
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.handleEdit(params)
                    }
                  }
                }, '修改'),
                h('el-button', {
                  props: {
                    type: 'text',
                    size: 'small',
                    loading: false
                  },
                  on: {
                    click: () => {
                      this.handleDelete(params)
                    }
                  }
                }, '删除')
              ])
            }
          }
        ]
      },
      searchOptions() {
        return [
          {
            value: 'chineseUsnmAbbr',
            key: 'chineseUsnmAbbr',
            label: '中文简称',
            type: 'input',
            placeholder: '请输入'
          },
          {
            value: 'countryNameAbbr',
            key: 'countryNameAbbr',
            label: '国别',
            type: 'input',
            placeholder: '请输入'
          },
          {
            value: 'userNum',
            key: 'userNum',
            label: '用户/供应商代码',
            type: 'input',
            placeholder: '请输入'
          }
        ]
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      renderText(type, code) {
        if (!(type && code)) {
          return
        }
        for (const item in type) {
          if (type[item].value == code) {
            return type[item].name
          }
        }
      },
      async getList() {
        this.tableLoading = true
        this.$parent.$parent.$parent.$emit('clickRow', null)
        const data = await baseApi.getList({
          size: this.pageing.pageSize,
          page: this.pageing.pageNum,
          ...this.queryForm
        })
        this.tableLoading = false
        this.tableData = data.data
        this.totalPage = data.total
      },
      // 每页条数发生改变时返回值
      handlePageSizeChange(v) {
        this.pageing.pageSize = v
        this.getList()
      },
      // 当前选中页发生改变时返回值
      handlePageCurrentChange(v) {
        this.pageing.pageNum = v
        this.getList()
      },
      // checkbox 当选择项发生变化时会触发该事件
      handleSelectionChange(v) {
        this.selected = v
      },
      cellClick(row) {
        this.$parent.$parent.$parent.$emit('clickRow', row.userNum)
      },
      // 查询搜索
      onSearch(queryParms) {
        this.pageing = {
          pageSize: 10,
          pageNum: 1
        }
        this.queryForm = queryParms
        this.getList()
      },
      // 点击添加
      handleAdd() {
        this.$refs.add.show({
          type: 'add',
          data: {},
          title: '新增'
        })
        this.action = 'add'
      },
      // 批量删除
      handleDeleteAll() {
        if (!this.selected.length) {
          this.$message.error('请选择删除项')
          return
        }
        this.$confirm('确定执行删除操作？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            const ids = this.selected.map((item) => item.id)
            this.batchDel(ids)
          })
          .catch(() => { })
      },
      // 删除
      handleDelete(params) {
        this.$confirm('确定执行删除操作？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.del(this.tableData[params.$index].id)
          })
          .catch(() => { })
      },
      // 编辑
      handleEdit(params) {
        this.action = 'edit'
        this.getDeatil(params.row.id)
      },
      // 保存
      async save(sendData) {
        const { code } = await baseApi.save(sendData)
        if (code == 0) {
          this.$refs.add.closeDialog()
          this.$message({
            message: '新增成功',
            type: 'success'
          })
          this.getList()
        }
      },
      async batchDel(ids) {
        this.delBtnLoading = true
        const { code } = await baseApi.batchDel(ids)
        if (code == 0) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getList()
          this.delBtnLoading = false
        }
      },
      async del(id) {
        const { code } = await baseApi.batchDel([id])
        if (code == 0) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getList()
        }
      },
      // 添加或修改返回数据
      appendData(data) {
        if (this.action == 'add') {
          this.save(data)
        } else {
          this.update(data)
        }
      },
      async update(sendData) {
        const { code } = await baseApi.update(sendData)
        if (code == 0) {
          this.$refs.add.closeDialog()
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.getList()
        }
      },
      openDetail(data) {
        this.$refs.add.show({
          type: 'view',
          data: data,
          title: '查看'
        })
        this.action = 'view'
      },
      // 获取详情
      async getDeatil(id) {
        const { data } = await baseApi.getDetail(id)
        this.$refs.add.show({
          type: 'edit',
          data: data,
          title: '修改'
        })
        this.action = 'edit'
      }
    }
  }
</script>
<style scoped lang="scss">
// .scmsa-table-page {
//   height: calc(100% - 100px);
// }
.top-btns-area{
  display: flex;
  justify-content:space-between;
  .left-btns{
    display: flex;
  }
  .right-btns{
    flex-grow: 1;
    margin-left: 8px;
    text-align: right;
    >.btns-area{
      display: flex;
    }
  }
}
</style>
